import { useReducer } from 'react'

const initialState = { name: '', age: 0 }

function reducer(state: any, action: any) {
  console.log(`state:${JSON.stringify(state)}, action:${JSON.stringify(action)}`)
  return { ...state, [action.field]: action.value }
}

export default function UseReducer() {
  const [state, dispatch] = useReducer(reducer, initialState)

  const handleChange = (e: any) => {
    dispatch({ field: e.target.name, value: e.target.value })
  }

  return (
    <>
      <input name='name' value={state.name} onChange={handleChange} />
      <input name='age' value={state.age} onChange={handleChange} />
    </>
  )
}
